<template>
	<el-dialog class="dialog" :title="title || '弹窗'" :close-on-click-modal="false" :modal-append-to-body="false"
		append-to-body :visible.sync="visible" :fullscreen="fullscreen" :before-close="onCloseDialog" :width="width">
		<span class="el-icon-full-screen" @click="onFull"></span>
		<div class="section-wrapper" :class="fullscreen ? 'full-screen' : 'no-full-screen'">
			<section class="module">
				<div class="module-content">
					<slot></slot>
				</div>
			</section>
		</div>
		<span slot="footer" class="dialog-footer" v-if="showBottom">
			<el-button @click="onCloseDialog">取消</el-button>
			<el-button v-if="confirmButton" type="primary" :loading="confirmLoading" @click="onConfirm">确定</el-button>
		</span>
	</el-dialog>
</template>
<script>
	export default {
		props: {
			title: {
				type: String,
			},
			confirmLoading: {
				type: Boolean,
				default: false,
			},
			showBottom: {
				type: Boolean,
				default: true,
			},
			width: {
				type: String,
				default: '70vw',
			},
			confirmButton: {
				type: Boolean,
				default: true,
				// 是否显示确认按钮, 默认显示
			},
			fullscreen: { //是否全屏  默认不全屏
				type: Boolean,
				default: false,
			},
		},
		data() {
			return {
				visible: true,
			}
		},

		methods: {
			// 全屏
			onFull() {
				// 监听esc键
				document.addEventListener('keyup', (e) => {
					if (e.keyCode === 27) {
						this.fullscreen = !this.fullscreen
					}
				})
				this.fullscreen = !this.fullscreen
			},
			onCloseDialog() {
				this.$emit('cancel')
			},
			onConfirm() {
				this.$emit('confirm')
			},
		},
	}
</script>

<style lang="scss" scoped>
	.module {
		width: 100%;
	}

	.section-wrapper {
		width: 400%;
		height: 100%;
		overflow: hidden;
	}

	.no-full-screen {
		max-height: 660px;
		overflow-y: scroll;
	}

	.module-content {
		padding-bottom: 60px;
	}

	.module {
		position: relative;
		left: 0;
		// min-height: 600px;
		width: 25%;
		height: 100%;
		float: left;
		transition: all 0.6s;
		padding: 0 20px;
		border-radius: 5px;
		// overflow-y: scroll;
	}

	.module-content {
		height: 88%;
	}

	.el-icon-full-screen {
		position: absolute;
		top: 23px;
		right: 45px;
		cursor: pointer;
	}

	.section-wrapper {
		width: 400%;
		height: 100%;
		overflow: hidden;
	}

	.dialog .el-dialog__body {
		padding: 0;
	}

	.full-screen {
		height: 100% !important;
	}

	.no-full-screen {
		max-height: 660px;
		overflow-y: scroll;
	}
</style>